<template>
  <div class="loading">
    <svg viewBox="0 0 50 50" :width="width" :height="height">
      <circle
        cx="25"
        cy="25"
        r="22"
        stroke-width="3"
        stroke-dasharray="34"
        :stroke="outsideColor"
        stroke-linecap="round"
        fill="none"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="0 25 25;360 25 25"
          :dur="dur"
          repeatCount="indefinite"
        ></animateTransform>
        <animate
          attributeName="stroke"
          :values="outsideColorAnimation"
          :dur="dur"
          repeatCount="indefinite"
        />
      </circle>
      <circle
        cx="25"
        cy="25"
        r="12"
        stroke-width="3"
        stroke-dasharray="19"
        :stroke="insideColor"
        fill="none"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          values="360 25 25;0 25 25"
          :dur="dur"
          stroke-linecap="round"
          repeatCount="indefinite"
        ></animateTransform>
        <animate
          attributeName="stroke"
          :values="insideColorAnimation"
          :dur="dur"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
    <div :style="{ color: loadingTipColor }">{{ loadingTip }}<dot></dot></div>
  </div>
</template>

<script>
import { computed } from 'vue';
import Dot from '@/components/Dot';

export default {
	name : 'Loading',
	components : {
		Dot,
	},
	props : {
		width : {
			type : [Number, String],
			default : 50,
		},
		height : {
			type : [Number, String],
			default : 50,
		},
		outsideColor : {
			type : String,
			default : '#3be6cb',
		},
		insideColor : {
			type : String,
			default : '#02bcfe',
		},
		duration : {
			type : [Number, String],
			default : 2,
		},
		loadingTip : {
			type : String,
			default : '加载中请稍后',
		},
		loadingTipColor : {
			type : String,
			default : '#fff',
		},
	},
	setup (ctx) {
		const outsideColorAnimation = computed(
			() => `
      ${ctx.outsideColor};${ctx.insideColor};${ctx.outsideColor}
    `
		);

		const insideColorAnimation = computed(
			() => `
      ${ctx.insideColor};${ctx.outsideColor};${ctx.insideColor}
    `
		);

		const dur = computed(() => `${ctx.duration}s`);

		return {
			outsideColorAnimation,
			insideColorAnimation,
			dur,
		};
	},
};
</script>

<style lang="scss" scoped>
.loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>
